﻿<%@ Page Title="" Language="C#" MasterPageFile="~/InputCtrl.Master" AutoEventWireup="true" CodeBehind="MaskedEdit.aspx.cs" Inherits="LiveDemo.InputCtrl.MaskedEdit" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="AjaxToolkit" %>
<%@ Register assembly="System.Web.Silverlight" namespace="System.Web.UI.SilverlightControls" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        function onSourceDownloadProgressChanged(sender, eventArgs) {
            var value = 0;
            if (eventArgs.progress) {
                value = eventArgs.progress;
            }
            else {
                value = eventArgs.get_progress();
            }
            sender.get_element().content.findName("progressBar").Width = value * sender.get_element().content.findName("progressBarBackground").Width;
        }
    </script> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="logo_SlInputCtrl"></div>
    <div class="heading">
        MaskedEdit Demonstration
    </div>
    <p>
        MaskedEdit is an <b>Silverlight control</b> to restrict the kind of text that can be entered. This control inherits directly from Textbox control.
    </p>
    <div style="height:800px;width:540px">
        <asp:Silverlight ID="Silverlight1" 
                runat="server" 
                Source="~/ClientBin/MaskedEditDemo.xap" MinimumVersion="2.0.31005.0" 
                Windowless="true"
                OnPluginSourceDownloadProgressChanged ="onSourceDownloadProgressChanged"
                SplashScreenSource="SplashMaskEdit.xaml"
                InitParameters="Culture=en-US,UICulture=en-US"
                Height="100%" 
                Width="100%">
        </asp:Silverlight>
    </div>
    <asp:Panel ID="description_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/Images/collapse.jpg" />
            Description
        </div>
    </asp:Panel>

    <asp:Panel ID="description_ContentPanel" runat="server" Style="overflow: hidden; padding:5px" Height="0px">
        <p>
            MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered. The supported data formats are: Number, Text, Any , Custom, Number and custom, Text and Custom. MaskedEdit uses the culture settings specified in the CultureName property. If none is specified the culture setting will be the same as the <b>current Silverlight thread</b>. 
        </p>
    </asp:Panel>
    <Ajaxtoolkit:collapsiblepanelextender ID="cpeDescription" runat="Server"
        TargetControlID="description_ContentPanel"   
        ExpandControlID="description_HeaderPanel" 
        CollapseControlID="description_HeaderPanel"
        CollapsedImage ="~/Images/collapse.jpg"
        ExpandedImage ="~/Images/expand.jpg"
        Collapsed="false" 
        SuppressPostBack ="true"
        ImageControlID="description_ToggleImage" />

    <asp:Panel ID="properties_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand"  />
            Dependency Properties
        </div>
    </asp:Panel>
    <asp:Panel ID="properties_ContentPanel" runat="server" Style="overflow: hidden;" Height="0px">
        <p>
            <span class="subheading">
            Mask:
            </span>
            Define the input mask of text. This property is <b>Required</b>.
        </p>
        <p>
            List of characters for valid input:
        </p>
        <ul>
            <li>
                9 = only numeric
            </li>
            <li>
                A = only letter 
            </li>
            <li>
                C = only Custom - match with property FilterText
            </li>
            <li>
                Z = Numeric + Custom
            </li>
            <li>
                # = Letter + Custom
            </li>
            <li>
                X = any digit 
            </li>
        </ul>
        <p>
            List of valid special characters:
        </p>
        <ul>
            <li>
                \ = Escape character
            </li>
        </ul>
        <p>
            List of valid modifier Mask:
        </p>
        <ul>
            <li>
                @ = Modifier indicator (valid only at the beginning of the mask)
            </li>
            <li>
                U = Transforms the input to uppercase
            </li>
            <li>
                L = Transforms the input to lowercase
            </li>
        </ul>
        <p>
            List of valid Pre-Defined Mask:
        </p>
        <ul>
            <li>
               <b> RightNumber</b>([$S]NNN.DDD[$S or S%]) = Number input mask aligned to the right.<br />
                <ul>
                    <li>
                        [$S] = (Optional) Currency Symbol and/or Signal
                    </li>
                    <li>
                        NNN.DDD = (<b>Required</b>) Part of the integer number positions + . + Part of the decimal number positions
                    </li>
                    <li>  
                        [S%] = (Optional) Signal and/or Percent symbol.<br /><br />
                    </li>
                </ul>
            </li>
            <li>
                <b>LeftNumber</b>([$S]NNN.DDD[$S or S%]) = Number input mask aligned to the left.<br />
                <ul>
                    <li>
                        [$S] = (Optional) Currency Symbol and/or Signal
                    </li>
                    <li>
                        NNN.DDD = (<b>Required</b>) Part of the integer number positions + . + Part of the decimal number positions
                    </li>
                    <li>  
                        [S%] = (Optional) Signal and/or Percent symbol.<br /><br />
                    </li>
                </ul>
            </li>
            <li>
                <b>R{?}</b>([U|L]NNN) = Repeater Mask ? NNN times.
                <ul>
                    <li>
                    ? = any char of list valid input. 
                    </li>
                    <li>
                    [U|L] = Optional transforms the input to uppercase  or lowercase.<br /><br />
                    </li>
                </ul>
            </li>
            <li>
                <b>ShortDate</b> = input mask to format Date : 99/99/99.<br /><br />
            </li>
            <li>
                <b>LongDate</b> = input mask to format Date : 99/99/9999.<br /><br />
            </li>
            <li>
                <b>ShortTime</b> = input mask to format Date : 99:99.<br /><br />
            </li>
            <li>
                <b>LongTime</b> = input mask to format Date : 99:99:99.<br /><br />
            </li>
            <li>
                <b>ShortTimeAMPM</b> = input mask to format Date : 99:99 [AM/PM].<br /><br />
            </li>
            <li>
                <b>LongTimeAMPM</b> = input mask to format Date : 99:99:99 [AM/PM].<br /><br />
            </li>
        </ul>
        <p>
            <b>Remarks 1</b> : Characters <b>[AM/PM] S / : . , % $</b> will be replaced by the equivalent of the language/culture defined by the property <em><b>CultureInput</b></em>.
        </p>
        <p>
            <b>Remarks 2</b> : The symbol Signal <b>S</b> is captured in any position that is the cursor.
        </p>
        <p>
            <b>Remarks 3</b> : The symbol [AM/PM] is captured in any position that is the cursor and changed with fist letter of Symbol. 
        </p>
        <p>
            <span class="subheading">
            PromptCharacter:
            </span>
            Prompt character for unspecified mask characters. Default value is _ .
        </p>
        <p>
            <span class="subheading">
            CultureInput:
            </span>
             Name of culture to use . Default value is thread culture Current.
        </p>
        <p>
            <span class="subheading">
            CultureLoad:
            </span>
             Name of culture to load data . Default value is thread culture Current.
        </p>
        <p>
            <span class="subheading">
            FilterText:
            </span>
             Valid characters for mask type "C","Z","#" (case-sensitive).Default value is empty.
        </p>
        <p>
            <span class="subheading">
            NegativeBackground:
            </span>
             Brush Background when the TextBox gets value negative. Default value is null.
        </p>
        <p>
            <span class="subheading">
            NegativeForeground:
            </span>
             Brush Foreground when the TextBox gets value negative. Default value is null.
        </p>
        <p>
            <span class="subheading">
            UnMaskPreserveDisplayCulture:
            </span>
             If true, preserve placeholders and Symbols of culture input.
             False translate for <em>CultureLoad</em> property. Default value is false.
        </p>
        <p>
            <span class="subheading">
            TextUnMasked:
            </span>
            Content text widhout masked. <b>Read only</b>.
        </p>
        <p>
            <span class="subheading">
            UnMaskedAtLostfocus:
            </span>
             If true, unmasked content text at lostfocus and replace placeholders and Symbols to <b>CutureLoad</b> property  or preserve culture format if <b>UnMaskPreserveDisplayCulture</b> property is true.
        </p>
        <p>
            <span class="subheading">
            FixedCursorRightPosition:
            </span>
             If true, Fixed Cursor at last valid position. Default value is false.
             <b>Remarks</b>: This property only valid for mask = <b>RightNumber</b>.When 
            mask is LeftNumber (behavior align left), this property is ignored.</p>
        <p>
            <span class="subheading">
            ReplaceEmptyText:
            </span>
            Exchange with the PromptCharacter and mask  = 'X' the content of this property.Default value Empty. Accepts only one character.
        </p>
        <p>
            <span class="subheading">
            ReplaceEmptyNumeric:
            </span>
            Exchange with the PromptCharacter and mask = '9' the content of this property.Default value Empty. Accepts only one character.
        </p>
    </asp:Panel>

    <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server"
        TargetControlID="properties_ContentPanel"
        ExpandControlID="properties_HeaderPanel"
        CollapseControlID="properties_HeaderPanel"
        SuppressPostBack ="true"
        CollapsedImage ="~/Images/expand.jpg"
        ExpandedImage ="~/Images/collapse.jpg"
        Collapsed="True"
        ImageControlID="properties_ToggleImage" />

    <asp:Panel ID="Method_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Method_ToggleImage" runat="server" ImageUrl="~/Images/collapse.jpg" />
            Methods
        </div>
    </asp:Panel>

    <asp:Panel ID="Method_ContentPanel" runat="server" Style="overflow: hidden; padding:5px" Height="0px">
        <p>
            <span class="subheading">
            Realod ():
            </span>
            Reload all properties and initial data.The last data input is lost.
        </p>
        <p>
            <span class="subheading">
            LoadText (Object Value):
            </span>
            Convert data input to mask input formated.
        </p>
        <p>
            <b>Paramets:</b>
        </p>
        <ul>
            <li>
               Value = Data to covert.The Culture used is same CultureLoad property.
            </li>
        </ul>
        <p>
            <span class="subheading">
            LoadText (Object Value,CultureInfo Culture):
            </span>
            Convert data input to mask input formated with Culture (Overrider CultureLoad property).
        </p>
        <p>
            <b>Paramets:</b>
        </p>
        <ul>
            <li>
               Value = Data to covert.
            </li>
            <li>
               Culture = CultureInfo to overrider.
            </li>
        </ul>
    </asp:Panel>
    <Ajaxtoolkit:collapsiblepanelextender ID="Collapsiblepanelextender1" runat="Server"
        TargetControlID="Method_ContentPanel"   
        ExpandControlID="Method_HeaderPanel" 
        CollapseControlID="Method_HeaderPanel"
        CollapsedImage ="~/Images/collapse.jpg"
        ExpandedImage ="~/Images/expand.jpg"
        Collapsed="true" 
        SuppressPostBack ="true"
        ImageControlID="Method_ToggleImage" />


</asp:Content>
